<script setup lang="ts">
import {nextTick, onMounted, ref} from 'vue'
import {ElMessage} from 'element-plus'
import AddOrUpdate from './part-add-or-update.vue'
import {PageParams} from '@/types/global.d'
import {Part} from '@/types/part.d'
import {deleteParts, listParts} from '@/api/part'

onMounted(() => {
  getDataList()
})
const dataList = ref<Required<Part>[]>()

const filterData = ref<Partial<Part>>({
  nameCn: '',
})

const pageParams = ref<PageParams>(new PageParams())

const total = ref(0)

const dataListLoading = ref(false)

// 获取数据列表
async function getDataList() {
  dataListLoading.value = true

  const data = listParts(pageParams.value, filterData.value)

  dataList.value = data.records
  total.value = data.total

  dataListLoading.value = false
}

// 每页数
function sizeChangeHandle(val: number) {
  pageParams.value.pageSize = val
  pageParams.value.page = 1
  getDataList()
}

// 当前页
function currentChangeHandle(val: number) {
  pageParams.value.page = val
  getDataList()
}

// 新增 / 修改
const addOrUpdate = ref<InstanceType<typeof AddOrUpdate>>()
const addOrUpdateVisible = ref(false)

function addOrUpdateHandle(id?: number) {
  addOrUpdateVisible.value = true
  nextTick(() => {
    addOrUpdate.value?.init(id)
  })
}

// 多选
const dataListSelections = ref([])
function selectionChangeHandle(val: any) {
  dataListSelections.value = val
}
// 删除
async function deleteHandle(id?: number[]) {
  const ids = id ? [id] : dataListSelections.value.map(item => {
    return item.id
  })
  if (ids.length === 0) {
    ElMessage({
      type: 'info',
      message: '请选中要删除的数据！',
    })
    return
  }
  await deleteParts(ids)
  ElMessage({
    type: 'success',
    message: '删除成功',
    duration: 1000,
  })
  await getDataList()
}
</script>

<template>
  <div class="mod-config">
    <el-form
      :inline="true"
      :model="filterData"
      @keyup.enter="getDataList()"
    >
      <el-form-item>
        <el-input
          v-model="filterData.nameCn"
          placeholder="配件名"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button
          type="primary"
          @click="addOrUpdateHandle()"
        >新增
        </el-button>
        <el-button
          type="danger"
          :disabled="dataListSelections.length <= 0"
          @click="deleteHandle()"
        >批量删除
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="dataListLoading"
      v-if="dataList"
      :data="dataList"
      border
      style="width: 100%"
      @selection-change="selectionChangeHandle"
    >
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50"
      />
      <el-table-column
        label="序号"
        type="index"
        width="60"
        align="center">
        <template v-slot="scope">
          <span>{{(pageParams.page - 1) * pageParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="nameCn"
        header-align="center"
        align="center"
        label="中文名"
      />
      <el-table-column
        prop="nameEn"
        header-align="center"
        align="center"
        label="英文名"
      />
      <el-table-column
        prop="pageNumber"
        header-align="center"
        align="center"
        label="页号"
      />
      <el-table-column
          prop="serialNumber"
          header-align="center"
          align="center"
          label="序号"
      />
      <el-table-column
        prop="modelNumber"
        header-align="center"
        align="center"
        label="型号"
      />
      <el-table-column
        prop="weight"
        header-align="center"
        align="center"
        label="重量"
      />
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作"
      >
        <template v-slot="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="addOrUpdateHandle(scope.row.id)"
          >修改
          </el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="deleteHandle(scope.row.id)"
          >删除
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="pageParams.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageParams.pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 20px"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
    />

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    />
  </div>
</template>
